<template>
  <z-paging ref="pagingRef" @query="queryList" v-model="list">
    <template #top>
      <MrCustom bg-color="bg-gradual-blue " is-back>
        <template #backText>
          返回
        </template>
      </MrCustom>
      <z-tabs ref="tabsRef" :current="currentTab" :list="tabs" @change="tabChange"/>
    </template>
    <DropdownFilter :filterData="filterData" :defaultIndex="defaultIndex"
                    @onSelected="onSelected" @dateChange="dateChange" @reset="reset"></DropdownFilter>
    <view v-for="(item,index) in list" :key="index" class="bg-white radius-lg margin-xs padding">
      <view class="flex flex-sub flex-direction">
        <view class="flex-sub flex justify-between align-center">
          <view class="text-xl text-bold" :style="'color:'+ getAppointmentTypeColor(item.type)">
            {{ getAppointmentType(item.type) }}
          </view>
          <view class="text-gray text-df">{{ myMoment(item.updateTime).fromNow() }}</view>
        </view>
        <view class="text-center text-bold text-xxl padding">
          <view>{{ getAppointmentStatus(item.status) }}</view>
          <!--          <view :style="'color:'+ getAppointmentStatusColor(item.status)">{{ getAppointmentStatus(item.status) }}</view>-->
        </view>
        <view class="flex flex-sub flex-direction text-gray text-df">
          <view class="flex padding-tb-xs">
            <view style="width: 20vw">就诊时间：</view>
            <view class="text-black">{{ getStartEndTimeString(item.appointmentTime) }}</view>
          </view>
          <view class="flex padding-tb-xs">
            <view style="width: 20vw">就诊人：</view>
            <view class="text-black">{{ item.patientName }}({{ item.patientUsername }})</view>
          </view>
          <view class="flex padding-tb-xs">
            <view style="width: 20vw">医生：</view>
            <view class="text-black">{{ item.nurseName }}({{ item.nurseUsername }})</view>
          </view>
        </view>
        <view class="flex flex-sub flex-direction solid-top padding-top margin-top-xs">
          <view @click="toDetail(item)" class="flex flex-sub justify-between">
            <view>查看详情</view>
            <view class="cuIcon-right text-gray"></view>
          </view>
        </view>

<!--        <view class="flex flex-sub justify-between">-->
<!--          <view></view>-->
<!--          <view v-if="item.status===1">-->
<!--            <button class="cu-btn" @click="cancel(item)">取消</button>-->
<!--            <button class="cu-btn bg-blue margin-left" @click="toDetail(item)">就诊</button>-->
<!--          </view>-->
<!--          <view v-else-if="item.status===3">-->
<!--            <button class="cu-btn margin-left bg-yellow" @click="toResult(item)">就诊结果</button>-->
<!--          </view>-->
<!--          <view v-else-if="item.status===4">-->
<!--            <button class="cu-btn margin-left bg-yellow" @click="toResult(item)">就诊结果</button>-->
<!--            <button v-if="item.commentId" class="cu-btn margin-left bg-green" @click="toAppraise(item)">已评价</button>-->
<!--            <button v-else class="cu-btn margin-left bg-green" @click="toAppraise(item)">立即评价</button>-->
<!--          </view>-->
<!--        </view>-->
      </view>
    </view>
  </z-paging>

</template>

<script setup lang="ts">
import api from "@/api";
import {useUserStore} from "@/store";
import {defineExpose, ref} from "vue";
import myMoment from "@/utils/common/myMoment";
import {getStartEndTimeString} from "@/utils/common/myUtils";
import {getAppointmentStatus, getAppointmentType, getAppointmentTypeColor} from "@/utils/common/myStandard";
import DropdownFilter from "@/pages/nurse/appointment/components/DropdownFilter.vue";
import {onLoad} from "@dcloudio/uni-app";
import MrCustom from "@/components/common/MrCustom.vue";


const userStore = useUserStore()
const pagingRef = ref()
const list = ref([])

const currentTab = ref(0)
const tabs = ref(['全部', '预约中', '进行中', '待回访', '已完成', '已取消'])
const filterData = [
  [{text: '全部类型', value: ''}, {text: '维护', value: '1'}, {text: '置管', value: '2'}, {text: '拔管', value: '3'}]
]
const defaultIndex = [0,]

const andParams = ref({
  type: '',
  createTime: '',
  status: '',
  patientUsername: userStore.userInfo?.username
})
const orParams = ref({})
const orderParams = ref({
  createTime: '2'
})
onLoad((option: any) => {
  if (option.e) {
    andParams.value.status = option.e
    currentTab.value = option.e
  }
})
/**
 * 类型选择
 * @param e
 */
const onSelected = (e: { value: string; }[][]) => {
  andParams.value.type = e[0][0].value
  pagingRef.value.reload()
}
/**
 * 日期选择
 * @param e
 */
const dateChange = (e: string) => {
  andParams.value.createTime = e
  pagingRef.value.reload()
}
/**
 * 重置选择
 */
const reset = () => {
  andParams.value.type = ''
  andParams.value.createTime = ''
  pagingRef.value.reload()
}
/**
 * tab选择
 * @param e
 */
const tabChange = (e: any) => {
  console.log(e)
  if (e === 0) {
    andParams.value.status = ''
  } else {
    andParams.value.status = e
  }
  pagingRef.value.reload()
}


/**
 * 就诊
 * @param item
 */
const toDetail = (item: any) => {
  uni.navigateTo({
    url: '/pages/patient/appointment/records/detail?appointmentInfo='
        + encodeURIComponent(JSON.stringify(item))
  })
}



const queryList = (pageNo: any, pageSize: any) => {
  api.appointment.list({
    pageNo: pageNo,
    pageSize: pageSize,
    andParams: JSON.stringify(andParams.value),
    orParams: '{}',
    orderParams: JSON.stringify(orderParams.value),
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      pagingRef.value.complete(tmp);
    }
  })
}
/**
 * 页面刷新 减少预约数
 */
const pageReload = () => {
  pagingRef.value.reload()
}

defineExpose({
  pageReload
})

</script>

<style scoped>

</style>